import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import ListTable from 'components/ListTable'
import { listTable as listTableDuck } from 'ducks'
import getLableList from 'graphql/project/task/labelTaskList.graphql'
import getLablePageInfo from 'graphql/project/task/labelTaskPageInfo.graphql'
import cancelTask from 'graphql/project/task/cancelTask.graphql'
import Icons from 'utils/constents/icons'

const FileList = (pid, actionInit,url) => ({ data }) => {
  const makeOpt = (pid, uid) => [
    {
      src: Icons.DELETE,
      text: '删除',
      action: () => actionInit({
        graphqlAction: cancelTask,
        submitValues: { pid, uid },
        icon: 'trash alternate',
        title: ' 取消任务',
        message: '请注意：取消任务只会取消未完成的任务,已存在的标签会被保留',
      }),
    },
  ]
  return (
    <React.Fragment>
      {data.user_task_count_view.map(member => (
        <ListTable.Row>
          <ListTable.Avatar
            src={member.user_object.avatar}
            url={`${url}/${member.user_object.name}`}
            text={member.user_object.name}
          />
          <ListTable.Cell>{member.done}</ListTable.Cell>
          <ListTable.Cell>
            {parseInt(member.done, 10) + parseInt(member.in_progress, 10)}
          </ListTable.Cell>
          <ListTable.Action width={2} options={makeOpt(pid, member.user_object.id)} />
        </ListTable.Row>
      ))}
    </React.Fragment>
  )
}

class DatasetData extends Component {
  componentDidMount = () => {}

  render() {
    const { actionOpen, project } = this.props
    const { projectId } = project
    const newTeamUrl = `/project/${project.orgName}/${project.projectName}/task/assign/new`
    const userTaskUrl = `/project/${project.orgName}/${project.projectName}/task/user`
    const globalActions = [
      {
        text: '分配任务',
        url: newTeamUrl,
      },
    ]
    const RenderList = FileList(projectId, actionOpen, userTaskUrl)
    return (
      <ListTable
        globalActions={globalActions}
        search={{ text: '搜索成员' }}
        pagination={{
          query: getLablePageInfo,
          name: 'user_task_count_view_aggregate',
          variables: {
            projectId,
          },
        }}
        listData={{
          query: getLableList,
          variables: {
            projectId,
            limit: 10,
          },
          header: (
            <ListTable.Header>
              <ListTable.HeaderCell
                style={{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                }}
              >
                成员
              </ListTable.HeaderCell>
              <ListTable.HeaderCell />
              <ListTable.HeaderCell>已完成</ListTable.HeaderCell>
              <ListTable.HeaderCell>总数</ListTable.HeaderCell>
              <ListTable.HeaderCell />
            </ListTable.Header>
          ),
          render: <RenderList />,
        }}
        holder={{
          description: '没有进行中的任务',
          action: {
            text: '分配标注任务',
            url: newTeamUrl,
          },
        }}
      />
    )
  }
}

const mapDispatchToProps = {
  link: path => push(path),
  actionOpen: listTableDuck.creators.actionOpen,
}

export default connect(
  null,
  mapDispatchToProps,
)(DatasetData)
